<script setup lang="ts">

import Bottom from "@/components/bottom.vue";
import { ref } from 'vue'

// 模拟数据
const unpaidOrders = ref([
  {
    businessName: '万家饺子（软件园E18店）',
    totalPrice: 49,
    id: 1,
    items: [
      { name: '纯肉饺子（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 11, price: 16 }
    ],
    deliveryFee: 3
  },
  {
    businessName: '万家饺子（软件园E18店）',
    totalPrice: 49,
    id: 2,
    items: [
      { name: '纯肉饺子（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 11, price: 16 }
    ],
    deliveryFee: 3
  }
])

const paidOrders = ref([
  {
    businessName: '万家饺子（软件园E18店）',
    totalPrice: 49,
    id: 3,
    items: [
      { name: '纯肉饺子（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 11, price: 16 }
    ],
    deliveryFee: 3
  },
  {
    businessName: '万家饺子（软件园E18店）',
    totalPrice: 49,
    id: 4,
    items: [
      { name: '纯肉饺子（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 11, price: 16 }
    ],
    deliveryFee: 3
  }
])

// 控制每个订单的展开状态
const expandedOrders = ref<number[]>([])

// 切换订单展开状态
const toggleOrder = (orderId: number) => {
  const index = expandedOrders.value.indexOf(orderId)
  if (index === -1) {
    expandedOrders.value.push(orderId)
  } else {
    expandedOrders.value.splice(index, 1)
  }
}

// 检查订单是否展开
const isExpanded = (orderId: number) => {
  return expandedOrders.value.includes(orderId)
}
</script>

<template>
  <div class="bg-blue-4 h-7% w-full flex justify-center items-center">
    <h1 class="text-center text-1.5xl color-white">我的订单</h1>
  </div>

  <div class="bg-white min-h-screen">
    <!-- 未支付订单 -->
    <div class="p-4">
      <h2 class="text-gray-600 mb-4">未支付订单信息</h2>
      <div v-for="order in unpaidOrders" :key="order.id" class="bg-white rounded-lg mb-3 p-4">
        <div class="flex justify-between items-center" @click="toggleOrder(order.id)">
          <div class="flex items-center">
            {{ order.businessName }}
            <i class="fa fa-caret-down ml-1" :class="{ 'rotate-180': isExpanded(order.id) }"></i>
          </div>
          <div class="flex items-center">
            <span class="mr-2">¥{{ order.totalPrice }}</span>
            <button class="bg-[#ff8000] text-white px-3 py-1 rounded text-sm">
              去支付
            </button>
          </div>
        </div>
        <!-- 订单详情 -->
        <div v-show="isExpanded(order.id)" class="mt-2 text-gray-600">
          <div v-for="item in order.items" :key="item.name" class="flex justify-between py-1">
            <span>{{ item.name }} × {{ item.quantity }}</span>
            <span>¥{{ item.price }}</span>
          </div>
          <div class="flex justify-between py-1">
            <span>配送费</span>
            <span>¥{{ order.deliveryFee }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 已支付订单 -->
    <div class="p-4">
      <h2 class="text-gray-600 mb-4">已支付订单信息</h2>
      <div v-for="order in paidOrders" :key="order.id" class="bg-white rounded-lg mb-3 p-4">
        <div class="flex justify-between items-center" @click="toggleOrder(order.id)">
          <div class="flex items-center">
            {{ order.businessName }}
            <i class="fa fa-caret-down ml-1" :class="{ 'rotate-180': isExpanded(order.id) }"></i>
          </div>
          <div>
            ¥{{ order.totalPrice }}
          </div>
        </div>
        <!-- 订单详情 -->
        <div v-show="isExpanded(order.id)" class="mt-2 text-gray-600">
          <div v-for="item in order.items" :key="item.name" class="flex justify-between py-1">
            <span>{{ item.name }} × {{ item.quantity }}</span>
            <span>¥{{ item.price }}</span>
          </div>
          <div class="flex justify-between py-1">
            <span>配送费</span>
            <span>¥{{ order.deliveryFee }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <bottom class="fixed bottom-0"></bottom>
</template>

<style scoped>
.fa-caret-down {
  transition: transform 0.3s ease;
}

.fa-caret-down.rotate {
  transform: rotate(180deg);
}
</style>